<template>
  <div class="app-container">
    <div id="data">
      <el-row type="flex" justify="end" style="margin-top: 15px">
        <el-col :span="8">
          <el-button size="mini" type="primary" plain>近7日</el-button>
          <el-button size="mini">近30日</el-button>
          <el-date-picker
            v-model="value1"
            size="mini"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
      </el-row>
      <strong>Bug 趋势图</strong>
      <div id="main" style="width: 100%; height: 380px" />

      <el-row type="flex" justify="end" style="margin-top: 15px">
        <el-col :span="8">
          <el-button size="mini" type="primary" plain>近7日</el-button>
          <el-button size="mini">近30日</el-button>
          <el-date-picker
            v-model="value1"
            size="mini"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
      </el-row>
      <strong>用例趋势图</strong>
      <div id="main2" style="width: 100%; height: 380px" />
    </div>
  </div>
</template>

<script>
import * as projectData from "@/api/projectData";

export default {
  data() {
    return {};
  },
  methods: {
    async myChart(id) {
      var myChart = this.echarts.init(document.getElementById("main"));
      let res = await projectData.IterationBugPlot(id);

      let names = [];
      let iteractionAdds = [],
        iteractionCloses = [];
      for (let v of res.data.iteraction_version_extension.Bug_trend_histogram
        .add) {
        for (let k of Object.keys(v)) {
          names.push(k);
        }
        for (let k of Object.values(v)) {
          iteractionAdds.push(k);
        }
      }
      for (let v of res.data.iteraction_version_extension.Bug_trend_line
        .closed) {
        for (let k of Object.values(v)) {
          iteractionCloses.push(k);
        }
      }

      var option = {
        tooltip: {
          trigger: "axis",
          formatter: "{b0}({a0}): {c0}<br />{b1}({a1}): {c1}",
        },
        legend: {
          data: ["新增", "关闭"],
        },
        xAxis: {
          data: names,
        },
        yAxis: [
          {
            type: "value",
            name: "新增",
            show: true,
            interval: 50,
            axisLine: {
              lineStyle: {
                color: "#5e859e",
                width: 2,
              },
            },
          },
          {
            type: "value",
            name: "关闭",
            min: 0,
            max: 100,
            interval: 50,
            axisLabel: {
              formatter: "{value} %",
            },
            axisLine: {
              lineStyle: {
                color: "#5e859e", //纵坐标轴和字体颜色
                width: 2,
              },
            },
          },
        ],
        series: [
          {
            name: "新增",
            type: "bar",
            barWidth: "50%",
            data: iteractionAdds,
          },
          {
            name: "关闭",
            type: "line",
            smooth: true,
            data: iteractionCloses,
          },
        ],
      };
      myChart.setOption(option);
    },
    async myChart2(id) {
      var myChart2 = this.echarts.init(document.getElementById("main2"));

      let ticketOption = {
        color: [
          "#2777EC",
          "#2EACFF",
          "#FFA61C",
          "#2EC054",
          "#F28685",
          "#8C64D7",
        ],
        legend: {
          show: true,
          right: "5%",
          itemWidth: 16,
          itemHeight: 11,
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          x: "7%",
          y: "15%",
          x2: "3%",
          y2: "15%",
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(151, 151, 151, 1)",
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              textStyle: {
                color: "#000",
              },
            },
            axisTick: {
              show: false,
            },
            // boundaryGap: true,
            data: ["1月", "2月", "3月", "4月", "5月"],
          },
        ],

        yAxis: [
          {
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(151, 151, 151, 1)",
              },
            },
            axisLabel: {
              show: true,
              // margin: 20,
              textStyle: {
                color: "#000",
              },
            },
            axisTick: {
              show: true,
              color: "rgba(151, 151, 151, 1)",
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(226, 232, 236, 1)",
                type: "dashed",
              },
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ["#fff", "rgba(245, 246, 250, 1)"],
              },
            },
          },
        ],
        series: [
          {
            name: "已执行",
            type: "bar",
            smooth: false,
            barWidth: 20,
            // showSymbol: false,/
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: "#157DFF",
              },
            },
            data: [100, 138, 150, 153, 180],
          },
          {
            name: "失败",
            barWidth: 20,
            type: "bar",
            smooth: false,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: "#5FD77E",
              },
            },
            data: [233, 233, 200, 180, 199],
          },
          {
            name: "阻塞",
            barWidth: 20,
            type: "bar",
            smooth: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: "#F7B500",
              },
            },
            data: [154, 189, 250, 210, 300],
          },
        ],
      };

      myChart2.setOption(ticketOption);
    },
  },
  mounted() {
    let id = window.location.href.split("id=")[1];
    this.myChart(id);
    this.myChart2(id);
  },
};
</script>

<style scoped>
#data {
  margin: 50px 20px;
}
</style>
